<template>
	<view class="xl-navbar">
		<view class="xl-navbar__content" :class="{'xl-navbar__fixed': fixed,'xl-navbar__shadow': shadow,'xl-navbar__border':border}">
			<!-- 设置背景颜色 -->
			<view class="xl-navbar__bg" :style="{'background': backgroundColorRgba, 'opacity': transparentValue}"></view>
			
			<!-- 设置顶部状态栏的颜色 -->
			<xl-status-bar v-if="statusBar" :fontColor="statusBarColor" :background="statusBarBackground"></xl-status-bar>

			<!-- 左右中内容 -->
			<view :style="{ 'color':colorInfo, 'height': height, 'line-height':height, '--side-width': sideWidth+'rpx'}"
				class="xl-navbar__header xl-navbar__content_view">
				<!-- 左侧插槽 -->
				<view v-if="!hiddenLeft" class="xl-navbar__header-btns xl-navbar__content_view" @tap="onClickLeft">
					<block v-if="leftText.length || leftIcon.length || back">
						<!-- 左侧图标，back是用返回图标 -->
						<view v-if="leftIcon.length || back" class="xl-navbar__content_view" :class="{'xl-navbar__transparent_bg': transparent == 'toShow' || transparent == 'toHidden'}" :style="{backgroundColor: transparentIconBg}">
							<!-- #ifndef APP-NVUE -->
							<xl-icon :name="back ? 'xl-left' : leftIcon" :color="colorInfo" :size="transparent == 'toShow' || transparent == 'toHidden' ? 20:21" />
							<!-- #endif -->
							<!-- #ifdef APP-NVUE -->
							<xl-icon :unicode="back ? '&#xe67e;' : leftIcon" :color="colorInfo" :size="transparent == 'toShow' || transparent == 'toHidden' ? 20:21" />
							<!-- #endif -->
						</view>
						<!-- 左侧文本 -->
						<view v-if="leftText.length" class="xl-navbar-btn-text xl-navbar__content_view">
							{{ leftText }}
						</view>
					</block>
					<!-- 左侧插槽 -->
					<block v-else>
						<slot name="left"/>
					</block>
				</view>


				<view class="xl-navbar__header-container xl-navbar__content_view" style="overflow: hidden;">
					<!-- 文本标题 -->
					<view v-if="title.length" class="xl-navbar__header-container-inner xl-navbar__content_view line-1"
						:style="{color:colorInfo, display: 'inline-block', opacity: centerSlotUseOpacity ? transparentValue : 1}">
						{{ title }}
					</view>
					<!-- 标题插槽 -->
					<block v-else>
						<view class="xl-navbar__content_view"
							:style="{opacity: centerSlotUseOpacity ? transparentValue : 1, flex: 1}">
							<slot/>
						</view>
					</block>
				</view>

				<view v-if="!hiddenRight" :class="title.length?'xl-navbar__header-btns-right':''"
					class="xl-navbar__header-btns xl-navbar__content_view" @tap="onClickRight">
					<!-- 优先显示图标 -->
					<block v-if="rightIcon.length || rightText.length">
						<view class="xl-navbar__content_view" v-if="rightIcon.length">
							<!-- #ifndef APP-NVUE -->
							<xl-icon :name="rightIcon" :color="colorInfo" size="22" />
							<!-- #endif -->
							<!-- #ifdef APP-NVUE -->
							<xl-icon :unicode="rightIcon" :color="colorInfo" size="22" />
							<!-- #endif -->
						</view>
						<view v-if="rightText.length" class="xl-navbar-btn-text xl-navbar__content_view">{{ rightText }}
						</view>
					</block>
					<block v-else>
						<slot name="right"/>
					</block>
				</view>
			</view>
		</view>

		<!-- 占位符 -->
		<view v-if="placeholder" class="xl-navbar__placeholder">
			<!-- 如果有顶部状态栏 -->
			<xl-status-bar v-if="statusBar"></xl-status-bar>
			<view :style="{ height: height}" />
		</view>
	</view>
	
</template>

<script setup>
	import { ref, computed, watch, onBeforeUnmount } from 'vue'
	import { onPageScroll } from '@dcloudio/uni-app'
	import propsData from './props.js'
	const props = defineProps(propsData)

	// 状态栏字体颜色
	const statusBarColor = ref('#000000')
	// 状态栏字体颜色信息，两个元素的数组，用于透明不透明切换
	let statusBarFontColorInfo = typeof props.statusBarFontColor == 'object' ? props.statusBarFontColor : [props.statusBarFontColor, props.statusBarFontColor];
	// 设置状态栏字体颜色
	statusBarColor.value = statusBarFontColorInfo[0];

	//背景颜色
	const backgroundColorRgba = ref('#ffffff')
	function setBgColor() {
		if (typeof props.backgroundColor == 'object') {
			let l = props.backgroundColor.length;
			if (l >= 2) {
				let rgbStr = "linear-gradient(" + props.backgroundColorLinearDeg + "deg, ";
				for (var c of props.backgroundColor) {
					rgbStr += c + ",";
				}
				backgroundColorRgba.value = rgbStr.substring(0, rgbStr.length-1) + ")";
			}
	
		} else if (typeof props.backgroundColor == 'string') {
			backgroundColorRgba.value = props.backgroundColor;
		}
	}
	setBgColor();
	watch( () => props.backgroundColor, (newValue, oldValue) => {
		setBgColor()
	})

	//文字颜色，数组，用于透明不透明切换
	let colorContainer = typeof props.color == 'object' ? props.color : [props.color, props.color];
	let colorInfo = ref(colorContainer[0]);
	watch( () => props.color, (newValue, oldValue) => {
		colorContainer = typeof newValue == 'object' ? newValue : [newValue, newValue];
		colorInfo.value = colorContainer[0];
	})
	
	// 透明度
	let transparentValue = ref(1)
	// 透明时，返回icon是否圆形背景高亮
	let transparentIconBg = ref('rgba(0,0,0,0)')
	//导航栏透明设置
	if(props.transparent == 'false' || props.transparent == 'toHidden') transparentValue.value = 1;
	else if(props.transparent == 'true' || props.transparent == 'toShow'){
		transparentValue.value = 0;
		if(props.leftIconHighlight) transparentIconBg.value = `rgba(0,0,0,0.3)`;
	}
	
	// 监听滚动
	if(props.transparent == 'toShow' || props.transparent == 'toHidden'){
		onPageScroll((e) => {
			if(props.transparent == 'toShow'){
				if (e.scrollTop > 100) {
					transparentValue.value = 1;
					colorInfo.value = colorContainer[1];
					if(props.leftIconHighlight) transparentIconBg.value = `rgba(0,0,0,0)`
				} else {
					transparentValue.value = e.scrollTop / 100;
					// #ifndef H5
					// 状态栏字体颜色变化
					if(transparentValue.value > 0.6) statusBarColor.value = statusBarFontColorInfo[1];
					else if (transparentValue.value < 0.2) statusBarColor.value = statusBarFontColorInfo[0];
					// #endif
					colorInfo.value = colorContainer[0];
					if(props.leftIconHighlight) transparentIconBg.value = `rgba(0,0,0,${0.3*(1-transparentValue.value)})`
				}
			}else if(props.transparent == 'toHidden'){
				if (e.scrollTop > 100) {
					transparentValue.value = 0;
					colorInfo.value = colorContainer[1];
					if(props.leftIconHighlight) transparentIconBg.value = `rgba(0,0,0,0.3)`
				} else {
					transparentValue.value = 1 - e.scrollTop / 100;
					// #ifndef H5
					// 状态栏字体颜色变化
					if(transparentValue.value > 0.8) statusBarColor.value = statusBarFontColorInfo[0];
					else if (transparentValue.value < 0.2) statusBarColor.value = statusBarFontColorInfo[1];
					// #endif
					colorInfo.value = colorContainer[0];
					if(props.leftIconHighlight) transparentIconBg.value = `rgba(0,0,0,${0.3*(1-transparentValue.value)})`
				}
			}
		});
	}

	// 是否添加占位符
	const placeholder = props.barPlaceholder == 'show' || (props.barPlaceholder == 'auto' && props.fixed)

	const emits = defineEmits(['click-left', 'click-right'])
	function onClickLeft() {
		if (props.back) {
			if (props.backUrl){
				uni.$xl.router.push(props.backUrl);
			}else{
				uni.$xl.router.back();
			}
		} else {
			emits('click-left')
		}
	}
	function onClickRight() {
		emits('click-right');
	}
</script>

<style lang="scss">
	.xl-navbar {
		position: relative;
		z-index: v-bind(zIndex);
		padding-top: 0;

		&__fixed {
			position: fixed;
			top: 0;
			z-index: 998;
		}

		&__shadow {
			box-shadow: 0 6rpx 16rpx 0 hsla(0, 0%, 60%, .1);
		}

		&__border:after {
			position: absolute;
			z-index: 3;
			bottom: 0;
			left: 0;
			right: 0;
			height: 1px;
			content: '';
			-webkit-transform: scaleY(.5);
			transform: scaleY(.5);
			background-color: $uni-border-color;
		}

		&__bg{
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
			left: 0;
		}
		
		&__content {
			display: block;
			// position: relative;
			width: 100%;
			/*background-color: $uni-bg-color;*/
			overflow: hidden;
			
			

			.xl-navbar__content_view {
				display: flex;
				align-items: center;
				justify-content: center;
			}
			
			.xl-navbar__transparent_bg{
				width: 58rpx;
				height: 58rpx;
				border-radius: 40rpx;
				box-sizing: border-box;
				background-color: rgba(0, 0, 0, 0.3);
			}
		}

		&__header {
			position: relative;
			z-index: 1;
			display: flex;
			flex-direction: row;
			width: 100%;
			font-size: 32rpx;
			transition: color 0.5s ease 0s;
			overflow: hidden;

			&-btns {
				display: inline-flex;
				flex-wrap: nowrap;
				flex-shrink: 0;
				min-width: var(--side-width);

				&:first-child {
					padding-left: 10rpx;
				}
				&-right:last-child {
					padding-right: 10rpx;
					text-align: right;
					flex-direction: row-reverse;
				}
				.xl-navbar-btn-text{
					padding: 0 12rpx;
				}
			}

			&-container {
				flex: 1;

				&-inner {
					flex: 1;
					display: inline-block;
					justify-content: center;
					font-size: 36rpx;
					color: #333;

					text-overflow: ellipsis;
					white-space: nowrap;
					overflow: hidden;
					text-align: center;
					// padding-right: 60rpx;
				}
			}
		}
	}
</style>
